<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect2
                      v-model="orgNo" 
                      @updateModelValue="changeqiye"
                      :optionlist="qiyelist"
                      :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="margin-top: 4px;display: flex;">
                <el-radio-group v-model="radio3" size="small" style="margin-right: 20px;">
                  <el-radio-button label="日"></el-radio-button>
                  <el-radio-button label="月"></el-radio-button>
                  <el-radio-button label="年"></el-radio-button>
                </el-radio-group>
                <template v-if="radio3=='日'">
                <el-date-picker
                size="small"
                  v-model="value1"
                  style="flex: 1;"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日">
                </el-date-picker>
              </template>
              <template v-else-if="radio3=='月'">
                <el-date-picker
                size="small"
                  v-model="value2"
                  value-format="yyyy-MM"
                  style="flex: 1;"
                  type="month"
                  placeholder="选择月">
                </el-date-picker>
              </template>
              <template v-else>
                <el-date-picker
                size="small"
                  v-model="value3"
                  value-format="yyyy"
                  style="flex: 1;"
                  type="year"
                  placeholder="选择年">
                </el-date-picker>
              </template>
              </el-col>
              <el-col :span="13" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                   <el-button size="small" type="primary" @click="submit">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
        <!-- <div>
          <span class="span" style="font-size: 14px;color: #606266;">用电企业</span>
        <span class="span right">
          <el-select v-model="orgNo"  size="small"  filterable  @change="changeqiye">
            <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo" class="dengji"></el-option>
          </el-select>
        </span>
        <span class="span">
          <el-radio-group v-model="radio3" size="small">
            <el-radio-button label="日"></el-radio-button>
            <el-radio-button label="月"></el-radio-button>
            <el-radio-button label="年"></el-radio-button>
          </el-radio-group>
        </span>
        <span class="span">
          <template v-if="radio3=='日'">
                <el-date-picker
                size="small"
                  v-model="value1"
                  style="width: 200px;"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日">
                </el-date-picker>
              </template>
              <template v-else-if="radio3=='月'">
                <el-date-picker
                size="small"
                  v-model="value2"
                  value-format="yyyy-MM"
                  style="width: 200px;"
                  type="month"
                  placeholder="选择月">
                </el-date-picker>
              </template>
              <template v-else>
                <el-date-picker
                size="small"
                  v-model="value3"
                  value-format="yyyy"
                  style="width: 200px;"
                  type="year"
                  placeholder="选择年">
                </el-date-picker>
              </template>
        </span>
        </div>
       <div>
        <span >
          <button class="button" @click="chongzhi">重置</button>
          <button class="button sure" @click="submit">查询</button>
        </span> 
       </div>  -->
      </div>
    <div class="bodybox">
      <!-- 封装导出/刷新/调节功能 -->
      <div style="display: flex; justify-content: space-between;">
        <div>负荷特性分析</div>
      <div class="toptitle">
        <TopTitle @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTitle>
      </div>
      </div>
      <!-- 封装表格 -->
      <div class="table">
        <TableCommend ref="TableColumn" :tableConfig="tableConfig"
           :tableData="tableData" :issize="iissize" >
        </TableCommend>
      </div>
    </div>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import { getuserlistapi,getfuhetexiaoapi,exportfuhetxapi} from '@/api/analysis'
import TopTitle from '@/components/TopTitle/index.vue'
import  TableCommend from '@/components/Table/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTitle,
    TableCommend
  },
  data() {
    return {
      iissize:'medium',
      radio3: '日',
      value1:'',
      value2: '',
      value3: '',
      orgNo:'',
      qiyelist:[],
      tableData: [],
      tableConfig: [
        { label: '用电企业', prop: 'companyName' },
        { label: '日期', prop: 'dateStr',center:'center' },
        { label: '平均负荷(kW)', prop: 'avg' ,center:'right'},
        { label: '最大负荷(kW)', prop: 'max' ,center:'right'},
        { label: '最大负荷发生时间', prop: 'maxTime',center:'center'},
        { label: '最小负荷(kW)', prop: 'min' ,center:'right'},
        { label: '最小负荷发生时间', prop: 'minTime',center:'center'},
      ]
    };
  },

  async mounted() {
    console.log(this.$refs.TableColumn.$refs.table);
    const res = await getuserlistapi()
    this.qiyelist = res.data.list
    this.qiyelist.unshift({bizOrgName:'全部',bizOrgNo:''})
    this.orgNo =this.$store.state.statistics.userbizOrgNo ? this.$store.state.statistics.userbizOrgNo : this.qiyelist[0].bizOrgNo
    // this.orgNo = '88018932'
    this.gettime() 
    this.gettablelist()
  },

  methods: {
    // 企业下拉
    changeqiye(val) {
      this.$store.commit('setuserobject', val)
    },
    // 获取表格数据
    async gettablelist() {
      this.$refs.TableColumn.loading=true
      const res = await getfuhetexiaoapi({
        orgNo: this.orgNo,
        // orgNo: '88018932',
        dateStr: this.radio3 == '日' ? this.value1 : this.radio3 == '月' ? this.value2 : this.value3,
        periodType:this.radio3 == '日' ? 'day' : this.radio3 == '月' ? 'month' : 'year'
      })
      this.tableData = res.data.list
      // setTimeout(()=>this.$refs.TableColumn.loading=false,500)
      this.$refs.TableColumn.loading=false
    },
    // 查询
    submit() {
      this.gettablelist()
    },
     // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
     },
    // 导出功能
    async daochu() { 
      const orgName=this.qiyelist.filter(ele=>ele.bizOrgNo==this.orgNo)[0].bizOrgName
    const res= await exportfuhetxapi({
       gNo: this.orgNo,
       orgName:orgName,
        // orgNo: '88018932',
        dateStr: this.radio3 == '日' ? this.value1 : this.radio3 == '月' ? this.value2 : this.value3,
        periodType:this.radio3 == '日' ? 'day' : this.radio3 == '月' ? 'month' : 'year',
        isParams: true
      })
      const blobContent = new Blob([res])
      let url = window.URL.createObjectURL(blobContent)
      saveAs(url, '负荷特性分析.xls')
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
       // 获取当前时间戳
   gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.value1 = year + '-' + month + '-' + day
      this.value2 = year + '-' + month
     this.value3 = year.toString()
    },
    // 重置
    async chongzhi() {
     this.radio3 = '日'
    const res = await getuserlistapi()
      this.qiyelist = res.data.list
      this.qiyelist.unshift({bizOrgName:'全部',bizOrgNo:''})
    this.orgNo = this.qiyelist[0].bizOrgNo
    this.gettime() 
    this.gettablelist()
    }
  },
};
</script>

<style lang="scss" scoped>
.dengji{
      padding-left: 10px;
    }
.bigbox{
  background-color: #f1f1f1;
  padding: 10px;
  height: 100%;
  .topbox{
    height: 80px;
    padding:20px;
    background-color: #fff;
  }
  .bodybox{
    margin-top: 10px;
    background-color: #fff;
    height: calc(100% - 90px);
    padding: 20px;
    .toptitle{
      margin-bottom: 15px;
    }
    .table{
      height: 94%;
    }
  }
}
</style>